<template>
	<view class="platform-goods-style">
		<view class="platform-goods-style-list">
			<view :class="['platform-goods-style-item',{active: data.select}]" v-for="(data,index) in styleList" :key="index" @click="choseClass(data.class_id,data.class_name)">
				<image mode="aspectFit" :src="data.class_image"></image>
				<view class="style_name">{{data.class_name}}</view>
				<image class="chosed-icon" src="https://master.shengejiaju.cn/web/static/icons/chosed.png"></image>
			</view>
		</view>
		<view class="platform-goods-style-btn"><button type="primary" @click="complate">完成</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choseStyle: [],
				styleList: []
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.$api.GoodsClassList({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.styleList = res.datas.goods_class
					this.choseStyle = res.datas.store_class
					for(let i = 0;i<this.styleList.length;i++){
						this.$set(this.styleList[i],'select',false)
					}
					this.styleList.forEach(item => {
						if(this.choseStyle.length){
							this.choseStyle.forEach((data,y) => {
								if(data.class_id==item.class_id){
									this.$set(item,'select',true)
								}
							})
						}
					})
				})
			},
			choseClass(id,name){
				this.styleList.forEach((item,index) => {
					if(id==item.class_id){
						this.$set(item,'select',!item.select)
					}
				})
			},
			complate(){
				let platform = []
				this.styleList.forEach((item,index) => {
					if(item.select){
						platform.push({
							store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
							class_name: item.class_name,
							platform_class_id: item.class_id
						})
					}
				})
				this.$api.PlatformAdd({platform: JSON.stringify(platform)}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '添加成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.platform-goods-style-list{
		display: flex;
		flex-wrap: wrap;
		background-color: #FFF;
		padding-bottom: 70rpx;
		.platform-goods-style-item{
			width: 33.3333%;
			text-align: center;
			margin-top: 70rpx;
			position: relative;
			image{
				width: 110rpx;
				height: 110rpx;
				background-color: #EEE;
				vertical-align: top;
				border-radius: 50%;
				border: solid 6rpx #FFF;
			}
			image.chosed-icon{
				position: absolute;
				width: 45rpx;
				height: 45rpx;
				right: 60rpx;
				top: 90rpx;
				border: none;
				display: none;
			}
			view{
				font-size: 26rpx;
				margin-top: 15rpx;
			}
			.style_name{
				
			}
			&.active{
				image{
					border-color: #FE9B26;
				}
				image.chosed-icon{
					display: block;
				}
				view{
					color: #FE9B26;
				}
			}
		}
	}
	.platform-goods-style-btn{
		padding: 75rpx;
		button{
			border-radius: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
		}
	}
</style>